<template>
  <lay-card>
    <vxe-toolbar>
      <template #buttons>
        <h4>
          <p style="color: #01aaed;font-size: 15px;font-weight: bold;">{{ content }}</p>
        </h4>
      </template>
    </vxe-toolbar>
    <vxe-table
      border="inner"
      show-overflow
      height="530px"
      :data="rules"
    >
      <vxe-column type="seq" width="40" fixed="left"></vxe-column>
      <vxe-column field="describe_mode" title="规则类型" width="120" show-overflow="title">
        <template #default="{ row }">
          <span>{{ formatRuleType(row) }}</span>
        </template>
      </vxe-column>
      <vxe-column field="key" title="规则内容" width="240" show-overflow="title">
        <template #default="{ row }">
          <a
            style="margin: 2px;color: blue;"
            @click="checkRow(row)"
          >{{row?.key}}</a>
        </template>
      </vxe-column>
      <vxe-column field="name" title="上次关联字段" width="120" show-overflow="title"></vxe-column>
      <vxe-column field="value" title="操作" fixed="right" width="100" v-if="allowRelate">
        <template #default="{ row }">
          <lay-tooltip :content="content" >
            <vxe-button
                size="mini"
                status="primary"
                content="同步"
                v-if="allowRelate"
                @click="relateOtherField(row)"
            ></vxe-button>
          </lay-tooltip>
        </template>
      </vxe-column>
      <template #empty>
        <span style="color: red;">
          <img src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif">
          <p>你好像还没设置过任何规则哦！</p>
        </span>
      </template>
    </vxe-table>
  </lay-card>
</template>

<script lang="ts">

export default {
  name: "HistoryRulesPage",
  components: {}
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {notify} from "../../untils/tip";
import {queryRuleHistoryApi} from "../../api/module/scene";

const emit = defineEmits(["checkedRule", "relateFields"]);

const {rowData, allowRelate} = defineProps({
  rowData: {type: Object},
  allowRelate: {type: Boolean, default: false},
})

onMounted(()=>{
  getHistoryRules();
  if(allowRelate){
    content.value = '规则中转站简介：同步功能，将该规则同步绑定到此场景下所有同名字段！';
  }else {
    content.value = '猜你想用：'
  }
})

const rules = ref([]);
const content = ref('');

const formatRuleType = (row: any) => {
  const ruleDict = reactive({
    0: '规则参数固化',
    1: '表达式',
    2: '条件表达式',
    3: '正则表达式',
    4: '自定义py函数',
    5: '枚举值',
    6: 'SQL语句'
  })
  return ruleDict?.[row.describe_mode]
}

// 查询历史规则
const getHistoryRules = async () => {
    let {result, status, message} = await queryRuleHistoryApi();
    if(status === 'success'){
        rules.value = result;
    }else {
        notify('fail', message);
    }
}

const checkRow = (unit: any) => {
  if(!allowRelate){
    emit('checkedRule', rowData, unit);
  }

}

const relateOtherField = (rule: any) => {
  console.log('relateOtherField submit rule:', rule)
  emit('relateFields', rule);
}

</script>

<style scoped>

</style>